<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE>
<html>
<head>
<meta charset=UTF-8>
<title></title>
<script src="${webroot }js/jquery.min.js"></script>
<script src="${webroot }js/bootstrap.min.js"></script>
<script src="${webroot }js/web.config.js"></script>
<script src="${webroot }js/func.action.js"></script>
<link rel="stylesheet" href="${webroot }css/bootstrap.min.css">
<link rel="stylesheet" href="${webroot }css/common.css">
<link rel="stylesheet" href="${webroot }css/client.css">
</head>
<body>
	<table class="table">
		<caption>
			<a href="#" onclick="getRec(${buId})">随机预约</a>
		</caption>
		<thead>
			<tr>
				<td>编号</td>
				<td>教室号</td>
				<td>楼层</td>
				<td>规格</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${list }" var="cr">
				<tr>
					<td>${cr.crId }</td>
					<td>${cr.crNo }</td>
					<td>${cr.crFloor }</td>
					<td>${cr.crLength }X ${cr.crWidth }</td>
					<td>
						<a href="#"
						onclick="record(${buId},${cr.crId },${cr.crNo },${cr.crLength },${cr.crWidth })">座位</a>
					</td>
				</tr>
			</c:forEach>
		</tbody>
	</table>

	<div class="info_footer">
		<div class="footer_con">

			<div class="btn-group dropup info_choose ">
				<span class="dropdown-toggle" id="status_menu" role="0"
					data-toggle="dropdown"> 
					${buName }
				</span>
				<ul class="dropdown-menu" role="menu" id="status_item">
					<c:forEach items="${bus }" var="bu">
						<c:if test="${bu.value.buId != buId && bu.value.buStatus == 1 }">
							<li>
								<a href="${webroot }client/classroom/query?page=1&buId=${bu.value.buId}&status=${status}">${bu.value.buName }</a>
							</li>
						</c:if>
					</c:forEach>
				</ul>
			</div>
			<div class="btn-group dropup info_choose ">
				<span class="dropdown-toggle" id="status_menu" role="0"
					data-toggle="dropdown"> 
					<c:if test="${status == 1 }">有可用座位</c:if>
					<c:if test="${status == 2 }">无可用座位</c:if>
				</span>
				<ul class="dropdown-menu" role="menu" id="status_item">
					<c:if test="${status == 1 }">
						<li>
							<a href="${webroot }client/classroom/query?page=1&buId=${buId}&status=2">无可用座位</a>
						</li>
					</c:if>
					<c:if test="${status == 2 }">
						<li>
							<a href="${webroot }client/classroom/query?page=1&buId=${buId}&status=1">有可用座位</a>
						</li>
					</c:if>
				</ul>
			</div>
			<div class="info_page">
				<ul class="pagination">
					<li><a id="pre_page" href="#">&laquo;</a></li>
					<li><a id="next_page" href="#">&raquo;</a></li>
				</ul>
				<div class="btn-group dropup">
					<button type="button" class="btn btn-default dropdown-toggle"
						id="page_menu" data-toggle="dropdown">
						第 ${page } 页<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu" id="info_page">

					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="hidden_area">
		<input type="hidden" value="${page }" id="page"> <input
			type="hidden" value="${pages }" id="pages"> <input
			type="hidden" value="${status }" id="status"> <input
			type="hidden" value="${buId }" id="buId"> <input
			type="hidden" id="crId">
	</div>

	<div class="modal fade" id="loading" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog loading">
			loading...
		</div>
		<!-- /.modal -->
	</div>

	<div class="modal fade" id="desk" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">座位预约</h4>
				</div>
				<div class="modal-body" id="room"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" id="sure" class="btn btn-primary">提交</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<div class="modal fade" id="record" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">预约记录</h4>
				</div>
				<div class="modal-body">
					<table class="table">
						<tbody>
							<tr>
								<td>教学楼</td>
								<td id="bu"></td>
								<td>教室号</td>
								<td id="rm"></td>
							</tr>
							<tr>
								<td>座位号</td>
								<td id="ds"></td>
								<td>预约日期</td>
								<td id="date"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

	<script type="text/javascript">
		$(document).ready(function(){
			$("#pre_page").click(function(){
		   		var page = $("#page").val();
		   		var buId = $("#buId").val();
		   		if(page <= 1){
		   			alert("已经是第一页了");
		   		}else{
		   			var now = page - 1;
		   			var status = $("#status").val();
		   			window.location.href= webRoot + "client/classroom/query?page="+now+"&status="+status+"&buId="+buId;
		   		}
		   	});
		   	$("#next_page").click(function(){
		   		var page = $("#page").val();
		   		var pages = $("#pages").val();
		   		var buId = $("#buId").val();
		   		if(pages <= page){
		   			alert("已经是最后一页了");
		   		}else{
		   			var now = parseInt(page) + 1;
		   			var status = $("#status").val();
		   			window.location.href= webRoot + "client/classroom/query?page="+now+"&status="+status+"&buId="+buId;
		   		}
		   	});
		   	
		   	var page = $("#page").val();
		   	var pages = $("#pages").val();
		   	var status = $("#status").val();
		   	var buId = $("#buId").val();
		   	var doc_page = $("#info_page");
		   	doc_page.empty();
		   	for (var i = 0; i < pages; i++) {
		   		var cur = i + 1;
		   		if (i != (page - 1)) {
		   			doc_page.append("<li><a href='"+webRoot+"client/classroom/query?page="+cur+"&status="+status+"&buId="+buId+"'>第"+cur+"页</a></li>");
		   		}
		   	}
		   	
		});
		</script>
</body>
</html>